<template>
  <div class="box">
    <!-- <head-page :title="`人才库(${this.$route.query.provincial})`">
				<img class="title-icon" src="../../../assets/3.png" alt="" />
			</head-page> -->
    <head-page :title="`${typeindex}.${typeName}`" id="backstyle"> </head-page>

    <div class="bottom">
      <!-- 版心区域 -->

      <!-- <div class="top m-t-10 m-b-10">{{ typeindex }}.{{ typeName }}</div> -->
      <!-- 内容区域 -->
      <div class="context area-center" v-if="list && list.length">
        <div
          class="he"
          v-for="(item, index) in list"
          :key="index"
          @click="persondetails(item.taluserId, typeindex, typeName)"
        >
          <div class="xiao">
            <div class="tu">
              <van-image
                width="1.62rem"
                height="2rem"
                :src="getImgUrl(item.taluserPicUrl)"
              ></van-image>
            </div>
            <P class="m-t-07">编号:{{ item.taluserNum }}</P>
            <P class="m-t-07">籍贯:{{ item.taluserPlace }}</P>
            <P class="m-t-07">专业:{{ item.taluserMajor }}</P>
            <P class="m-t-07">身高:{{ item.taluserHeight }}</P>
            <!-- <P>学历:{{ item.taluserStudy }}</P> -->
          </div>
        </div>
      </div>
      <div class="bold-700 tac c999 m-t-20" v-else>暂无数据</div>
    </div>
  </div>
</template>

<script>
import { findByAreaAndType } from "@/api/index";
export default {
  data() {
    return {
      num: this.$store.state.provin,
      list: [],
      citysub: sessionStorage.getItem("provincesub"),
      cityjoin: sessionStorage.getItem("province") + "人才储备信息",
      typeName: this.$route.query.typeName, //标题内容
      typeindex: this.$route.query.index, //下标
    };
  },
  mounted() {
    let data = this.$route.query;
    if (data.title == this.cityjoin) {
      //定位的省份
      findByAreaAndType({
        // provincial: data.provincial,
        provincial: this.citysub,
        taluserType: data.typeId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    } else {
      //全国各省
      findByAreaAndType({
        provincial: data.provincial,
        taluserType: data.typeId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //人才库详情
    persondetails(i, index, Name) {
      // console.log(i);
      this.$router.push({
        path: "/persondetails",
        query: {
          userId: i,
          provincial: this.$route.query.provincial,
          index,
          Name,
        },
      });
    },
    getImgUrl(img) {
      return this.montageImgUrl(img);
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  /* min-height: 6rem;
  background-color: #f6f4fb; */
}

/* 底部区域 */
.bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 0.1rem;
  font-size: .19rem;
}
/* 版心区域 */
.center {
  width: 95%;
}

/* 头部区域 */
.top {
  width: 100%;

  font-size: 0.18rem;
  font-weight: 700;
}
/* 内容区域 */
.context {
  display: flex;
  flex-wrap: wrap;
}
.he {
  width: 1.71rem;
  display: flex;
  border-radius: 0.1rem;
  margin: 3px;
  padding: 0.04rem 0;
  justify-content: center;
  background-color: #f6f4fb;
}
/* 小小盒子 */
.xiao {
  width: 95%;
  border-radius: 0.1rem;
  flex-shrink: 0;
}
.xiao img {
  width: 1.62rem;
  margin-top: 0.05rem;
  border-radius: 0.1rem 0.1rem 0 0;
}
</style>